<!-- 车型添加 -->
<template>
  <div>
    <el-dialog
      title="新增车型"
      :visible="showDialog"
      width="40%"
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <el-form
        ref="addForm"
        label-width="120px"
        :model="addForm"
        :rules="rules"
      >
        <el-form-item
          label="车辆类型"
          prop="name"
        >
          <el-input
            v-model="addForm.name"
            placeholder="请输入车辆类型"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="应载重量"
          prop="allowableLoad"
        >
          <el-input
            v-model="addForm.allowableLoad"
            placeholder="请输入车辆载重"
          >
            <span
              slot="suffix"
              style="margin-right:10px"
            >吨</span>
          </el-input>
        </el-form-item>
        <el-form-item
          label="应载体积"
          prop="allowableVolume"
        >
          <el-input
            v-model="addForm.allowableVolume"
            placeholder="请输入车辆体积"
          >
            <span
              slot="suffix"
              style="margin-right:10px"
            >立方</span>
          </el-input>
        </el-form-item>
        <el-form-item
          label="长"
          prop="measureLong"
        >
          <el-input
            v-model="addForm.measureLong"
            value="0.0"
          >
            <span
              slot="suffix"
              style="margin-right:10px"
            >米</span>
          </el-input>
        </el-form-item>
        <el-form-item
          label="宽"
          prop="measureWidth"
        >
          <el-input
            v-model="addForm.measureWidth"
            value="0.0"
          >
            <span
              slot="suffix"
              style="margin-right:10px"
            >米</span>
          </el-input>
        </el-form-item>
        <el-form-item
          label="高"
          prop="measureHigh"
        >
          <el-input
            v-model="addForm.measureHigh"
            value="0.0"
          >
            <span
              slot="suffix"
              style="margin-right:10px"
            >米</span>
          </el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-row
          type="flex"
          justify="center"
        >
          <el-col :span="8">
            <el-button
              type="danger"
              @click="btnOk"
            >确 定</el-button>
            <el-button @click="closeDialog">取 消</el-button>
          </el-col>
        </el-row>
      </span>
    </el-dialog>
  </div>
</template>
<script>
// 添加和详情
import {
  add as addCart,
  detail as carDetail,
  update as carUpdate
} from '@/api/transit'
export default {
  name: 'CarModelsAdd',
  props: {
    showDialog: {
      required: true,
      type: Boolean
    }
    // editId: {
    //   required: true
    // }
  },
  data() {
    return {
      addForm: {
        // 车辆类型
        name: null,
        // 应载重量
        allowableLoad: null,
        // 准载体积
        allowableVolume: null,
        // 长
        measureLong: '0.0',
        // 宽
        measureWidth: '0.0',
        // 高
        measureHigh: '0.0'
      },
      rules: {
        name: [
          {
            required: true,
            message: '车型名称不能为空',
            trigger: 'blur'
          }
        ],
        allowableLoad: [
          {
            required: true,
            message: '应载重量不能为空',
            trigger: 'blur'
          },
          {
            pattern: /^([1-9][0-9]{0,1}|100)$/,
            message: '只能输入1-100之间的正整数，请重新输入',
            trigger: 'blur'
          }
        ],
        allowableVolume: [
          {
            required: true,
            message: '应载体积不能为空',
            trigger: 'blur'
          },
          {
            pattern: /^([1-9][0-9]{0,1}|100)$/,
            message: '只能输入1-100之间的正整数，请重新输入',
            trigger: 'blur'
          }
        ],
        measureLong: [
          {
            pattern: /^([0-9]{1,2}$)|(^[0-9]{1,2}\.[0-9]{1,2}$)|(^100$)$/,
            message: '长最多只能输入100，请重新输入',
            trigger: 'blur'
          }
        ],
        measureWidth: [
          {
            pattern: /^([0-9]{1,2}$)|(^[0-9]{1,2}\.[0-9]{1,2}$)|(^100$)$/,
            message: '宽最多只能输入100，请重新输入',
            trigger: 'blur'
          }
        ],
        measureHigh: [
          {
            pattern: /^([0-9]{1,2}$)|(^[0-9]{1,2}\.[0-9]{1,2}$)|(^100$)$/,
            message: '高最多只能输入100，请重新输入',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    // 关闭窗口
    closeDialog() {
      // 关闭
      this.$emit('closeDialog', false)
      // 提示
      // 清空表单
      this.$refs.addForm.resetFields()
    },
    // 确定按钮
    btnOk() {
      // 进行兜底校验，再进行向下执行
      this.$refs.addForm.validate(async isOk => {
        if (isOk) {
          // 判断是添加还是编辑
          if (this.addForm.id) {
            // 编辑
            await carUpdate(this.addForm.id, this.addForm)
            // 提示
            this.$message.success('编辑成功')
            // 关闭弹窗
            this.closeDialog()
          } else {
            // 调接口
            await addCart(this.addForm)
            // console.log(rs)
            // 提示用户
            this.$message.success('添加成功')
            // 关闭弹窗
            this.closeDialog()
          }
        }
      })
    },
    async getDetail(id) {
      const rs = await carDetail(id)
      // console.log(rs)
      this.addForm = rs.data
    }
  }
}
</script>
